<template>
  <div class="container">
    <div class="box box-ver w-p100 h-p100">
      <div class="search box box-ac">
        <div class="icon icon-search"></div>
        <input placeholder="搜索" v-model="searchWord" class="box-f1" type="text">
      </div>
      <div class="fixed-bar">
        <div @click.stop @touchstart="scroll(index)" @touchmove="scroll(index)" v-for="(item, index) in searchList" :key="index" class="text">
          {{index}}
        </div>
      </div>
      <div ref="scroll" class="box box-ver box-f1 of-y-s">
        <div v-for="(item, index) in searchList" :value="item" :key="index" class="list-content">
          <div :id="index" class="tag">
            {{index}}
          </div>
          <div class="list list1">
            <div v-for="(item1, index1) in item" :value="item1" :key="index1" @click="checkItem(item1)"  class="item box box-ver">
              <div class="box box-ac">
                <div class="name">{{item1.name}}</div>
                <div class="tc-999 code">{{item1.number}}</div>
              </div>
              <div class="dep tc-999 ell">
                {{item1.company}}-{{item1.department}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getPyData, getTop } from '@/assets/js/common'
export default {
  name: 'k2PersonSelect',
  data () {
    return {
      dataList: [],
      searchList: [],
      searchWord: '',
      timer: null
    }
  },
  computed: mapState(['userNum']),
  mounted () {
    this.initLoc()
  },
  watch: {
    searchWord () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.getEmployee()
      }, 666)
    }
  },
  methods: {
    checkItem (item) {
      item = Object.assign({}, item, this.$route.query)
      this.$emit('selectPersonCb', item)
      this.saveLoc(item)
      this.$router.go(-1)
    },
    scroll (index) {
      let $target = document.getElementById(index)
      let $scroll = this.$refs.scroll
      let top = getTop($target, $scroll)
      $scroll.scrollTop = top
    },
    initLoc () {
      let locList = localStorage.getItem('locK2Person')
      if (locList) {
        locList = JSON.parse(locList)
        this.locList = getPyData(locList, 'name')
        this.searchList = this.locList
      }
    },
    saveLoc (item) {
      let locList = localStorage.getItem('locK2Person')
      let newLoc = []
      if (locList) {
        locList = JSON.parse(locList)
      } else {
        locList = []
      }
      locList.forEach(item1 => {
        if (item1.number !== item.number) {
          newLoc.push(item1)
        }
      })
      newLoc.unshift(item)
      localStorage.setItem('locK2Person', JSON.stringify(newLoc.slice(0, 20)))
    },
    getEmployee () {
      if (this.searchWord === '') {
        this.searchList = this.locList
        return
      }
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getEmployee',
          user: this.searchWord
        }
      }).then(res => {
        if (res.code === 200) {
          let searchList = res.t.map(item => {
            let { company, department, number, name } = item
            if (name.indexOf('.') > -1) {
              name = name.split('.')[1]
            }
            return { company, department, number, name }
          })
          this.searchList = getPyData(searchList, 'name')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/search';
.container{
  z-index:3;
}
.list-content{
  background-color:$bgColor;
}
.item{
  font-size:.26rem;
  .code{
    padding-left:.2rem;
  }
  .dep{
    padding-top:.1rem;
  }
}
.fixed-bar{
  width:.5rem;
  position: absolute;
  z-index:8;
  top:55%;
  right:0;
  color:#999;
  // background-color:rgba(0,0,0,.5);
  transform: translateY(-50%);
  .text{
    width:.5rem;
    text-align: center;
  }
}
</style>
